<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font 作业/iconfont.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .box {
            display: flex;
        }

        .box .left {
            width: 250px;
            background-color: rgb(10, 16, 106);
            line-height: 57px;
            color: #eee;
            box-sizing: border-box;
            padding: 0 8px;
        }

        .box .left .Dash {
            padding: 0 20px;
            border-radius: 5px;
        }

        .box .left .Dash.active {
            background-color: rgb(0, 98, 255);
        }

        .box .left .Dash.active1 {
            background-color: rgb(255, 255, 255);
            color: rgb(61, 59, 59);
        }

        .box .left .title,
        .caption,
        .EXAMPLES {
            padding: 0 12px;
            border-radius: 5px;
        }

        .box .left .iconfont {
            margin-right: 10px;
        }

        .box .left .Dash .new {
            display: inline-block;
            width: 50px;
            height: 22px;
            border-radius: 5px;
            background-color: red;
            text-align: center;
            line-height: 22px;
            margin-left: 55px;
        }

        .box .left .Dash .blue {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: aqua;
            border-radius: 5px;
            text-align: center;
            line-height: 20px;
            margin-left: 80px;
        }

        .box .left .Dash .left-jiantou {
            float: right;
        }

        .box .right {
            flex: 1;
        }

        .box .right .top {
            width: 100%;
            height: 70px;
            line-height: 70px;
            font-size: 24px;
            position: relative;
        }

        .box .right .top .icon-iconfonticon {
            margin-left: 50px;
            margin-right: 50px;
            font-size: 24px;
        }

        .box .right .top .home {
            margin-right: 50px;
        }

        .box .right .top .search {
            box-sizing: border-box;
            height: 30px;
            background-color: #eee;
            border: none;
            padding-left: 10px;
        }

        .box .right .top .icon-iconfontshumajiadian {
            position: absolute;
            left: 560px;
            top: 5px
        }

        .box .right .top .icon-shouye,
        .icon-zhuantifuwu,
        .icon-bianji {
            float: right;
            margin-right: 30px;
        }

        .box .right main {
            width: 100%;
            height: 100px;
            background-color: #eee;
            line-height: 100px;
        }

        .box .right main .v3 {
            margin-left: 50px;
            font-size: 30px;
        }

        .box .right main .Dv3 {
            float: right;
            margin-right: 30px;
        }

        .box .right .bot {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            background-color: #eee;
        }

        .box .right .bot .small-box {
            width: 48%;
            box-sizing: border-box;
            padding: 20px;
            border: 1px solid gray;
        }

        .box .right .bot .box1 {
            height: 500px;
            margin-bottom: 20px;
            font-size: 20px;
        }

        .box .right .bot .box2 {
            height: 500px;
            margin-bottom: 20px;
            font-size: 20px;
        }

        .box .right .bot .box3 {
            height: 262px;
        }

        .box .right .bot .box4 {
            height: 262px;
        }

        .box .right .bot .online {
            width: 100%;
            height: 50px;

        }

        .box .right .bot .view {
            float: right;
        }

        .box .right .bot .prev {
            width: 100%;
            height: 40px;
        }

        .box .right .bot #zhexiantu {
            width: 100%;
            height: 340px;
            margin-top: 10px;
        }

        .box .right .bot #zhuzhuangtu {
            width: 100%;
            height: 340px;
            margin-top: 10px;
        }

        .box .right .bot .box3 .date {
            width: 100%;
            height: 150px;
        }
        .box .right .bot .box3 .date .hang{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .box .right .bot .box3 .date .touxiang{
            display: inline-block;
            width: 20px;
            height: 20px;
            position: relative;
        }
        .box .right .bot .box3 .date .touxiang img{
            width: 100%;
            position: absolute;
        }
        .box .right .bot .box3 .date .name{
            display: inline-block;
            width: 300px;
        }
        .box .right .bot .box3 .date .price{
            display: inline-block;
            width: 150px;
        }
        .box .right .bot .box3 .date .sales{
            display: inline-block;
            width: 150px;
        }
        .icon-shezhi,.icon-yonghuguanli_huaban{
            float: right;
            margin-right: 20px;
        }
        .box .right .bot .box3 .biaoti{
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            font-weight: 700;
        }
        .box .right .bot .box3 .biaoti .Pro{
            margin-left: 130px;
        }
        .box .right .bot .box3 .biaoti .Pri{
            margin-left: 210px;
        }
        .box .right .bot .box3 .biaoti .Sal{
            margin-left: 110px;
        }
        .box .right .bot .box3 .biaoti .Mor{
            margin-left: 70px;
        }
        .box .right .bot .box4 .con{
            width: 100%;
            height: 90px;
            line-height: 90px;
            border-bottom: 1px solid gray;
        }
        .box .right .bot .box4 .con .icon-shanchu ,.icon-yonghu{
            font-size: 30px;
            color: green;
            margin-left: 20px;
        }
        .box .right .bot .box4 .con .shangsheng{
            float: right;
            line-height: 40px;
        }
        .box .right .bot .box4 .con .shangsheng .first{
            display: block;
            float: right;
            margin-right: 20px;
        }
        .box .right .bot .box4 .con .shangsheng .second{
            display: block;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <div class="title"><span class="iconfont icon-iconfonticonfonticon31"></span> AdminLTE 3</div>
            <div class="caption"><span class="iconfont icon-iconfontgongyichongwu"></span>Alexander Pierce</div>
            <div class="Dash active"><span class="iconfont icon-iconfonticon"></span>Dashboard<span
                    class="left-jiantou">v</span></div>
            <div class="Dash"><span class="iconfont icon-iconfont5"></span>Dashboard v1</div>
            <div class="Dash"><span class="iconfont icon-iconfonticon1"></span>Dashboard v2</div>
            <div class="Dash active1"><span class="iconfont icon-iconfontshouji"></span>Dashboard v3 </div>
            <div class="Dash"><span class="iconfont icon-iconfontphone"></span>Widgels<span class="new">New</span></div>
            <div class="Dash"><span class="iconfont icon-iconfontshumajiadian"></span>Charts <span
                    class="left-jiantou">&lt;</span></div>
            <div class="Dash"><span class="iconfont icon-iconfontshipin"></span>UI Elements<span
                    class="left-jiantou">&lt;</span></div>
            <div class="Dash"><span class="iconfont icon-iconfontxiebaopeishi"></span>Forms<span
                    class="left-jiantou">&lt;</span></div>
            <div class="Dash"><span class="iconfont icon-iconfontyiqiyibiao"></span>Tables<span
                    class="left-jiantou">&lt;</span></div>
            <div class="EXAMPLES">EXAMPLES</div>
            <div class="Dash"><span class="iconfont icon-iconfontgongyichongwu"></span>Calendar<span
                    class="blue">2</span></div>
            <div class="Dash"><span class="iconfont icon-iconfontfuzhuangneiyi"></span>Mailbox<span
                    class="left-jiantou">&lt;</span></div>
            <div class="Dash"><span class="iconfont icon-iconfontdiangongdianqi"></span>Pages<span
                    class="left-jiantou">&lt;</span></div>
            <div class="Dash"><span class="iconfont icon-iconfont-shanzi"></span>Extras<span
                    class="left-jiantou">&lt;</span></div>
        </div>
        <div class="right">
            <div class="top">
                <span class="iconfont icon-iconfonticon"></span>
                <span class="home">Home</span>
                <span class="home">Contact</span>
                <input type="text" placeholder="Search" class="search">
                <span class="iconfont icon-iconfontshumajiadian"></span>
                <span class="iconfont icon-shouye"></span>
                <span class="iconfont icon-zhuantifuwu"></span>
                <span class="iconfont icon-bianji"></span>

            </div>
            <main>
                <span class="v3">Dashboard v3</span>
                <span class="Dv3">Dashboard v3</span>
                <span class="Dv3">/</span>
                <span class="Dv3" style="color: green;">Home</span>
            </main>
            <div class="bot">
                <div class="small-box box1">
                    <div class="online">
                        <span class="store">Online Store Visitors</span>
                        <span class="view" style="color:rgb(11, 145, 241);">View Report</span>
                    </div>
                    <div class="prev">
                        <span class="store" style="font-weight: 700;">820</span>
                        <span class="view" style="color:rgb(0, 255, 47);">↑ 12.5%</span>
                    </div>
                    <div class="over">
                        <span class="store">Visitiors Over Time</span>
                        <span class="view" style="color:rgb(138, 144, 148);">Since last week</span>
                    </div>
                    <div id="zhexiantu"></div>
                </div>
                <div class="small-box box2">
                    <div class="online">
                        <span class="store">Sales</span>
                        <span class="view" style="color:rgb(11, 145, 241);">View Report</span>
                    </div>
                    <div class="prev">
                        <span class="store" style="font-weight: 700;">$18,230.00</span>
                        <span class="view" style="color:rgb(0, 255, 47);">↑ 33.1%</span>
                    </div>
                    <div class="over">
                        <span class="store">Visitiors Over Time</span>
                        <span class="view" style="color:rgb(138, 144, 148);">Since last month</span>
                    </div>
                    <div id="zhuzhuangtu"></div>
                </div>
                <div class="small-box box3">
                    <div class="online">
                        <span class="store" style="font-weight: 700;font-size: 20px;">Products</span>
                        <span class="iconfont icon-shezhi" style="font-size: 20px;"></span>
                        <span class="iconfont icon-yonghuguanli_huaban" style="font-size: 20px;"></span>
                    </div>
                    <div class="biaoti">
                        <span class="Pro">Product</span>
                        <span class="Pri">Price</span>
                        <span class="Sal">Sales</span>
                        <span class="Mor">More</span>
                    </div>
                    <div class="date"></div>
                </div>
                <div class="small-box box4">
                    <div class="online">
                        <span class="store" style="font-weight: 700;font-size: 20px;">Online Store Overview</span>
                        <span class="iconfont icon-shezhi" style="font-size: 20px;"></span>
                        <span class="iconfont icon-yonghuguanli_huaban" style="font-size: 20px;"></span>
                    </div>
                    <div class="con">
                        <span class="iconfont icon-shanchu"></span>
                        <span class="shangsheng">
                            <span class="first" style="color: green;">↑ 12%</span>
                            <span class="second">CONVERSION RATE</span>
                        </span>
                    </div>
                    <div class="con" style="border-bottom: none;">
                        <span class="iconfont icon-yonghu" style="color:orange ;"></span>
                        <span class="shangsheng">
                            <div class="first" style="color: orange;">↑ 0.8%</div>
                            <div class="second">SALES RETE</div>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./moke.js"></script>
<script>
    function zhexiantu() {
        //创建并初始化一个echarts实例
        var count = document.querySelector('#zhexiantu')
        var e = echarts.init(count)
        //绘制图表
        e.setOption({
            legend: { //图例
                bottom: 2,
                right: 60,
            },
            xAxis: {
                data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
            },
            yAxis: {
                // data:['0','20','40','60','80','100','120','140','160','180','200']
            },
            series: [
                {
                    name: 'This Week',
                    type: 'line',
                    data: [100, 120, 170, 168, 180, 175, 160],
                    symbolSize: 10,
                    Symbol: 'circle',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'blue',
                            borderWidth: 2,
                            borderColor: 'yellow',
                            lineStyle: { width: 2 },
                            ShadowBlur: 5,
                            shadowColor: '#188df0'
                        }
                    }
                },
                {
                    name: 'Last Week',
                    type: 'line',
                    data: [60, 80, 70, 65, 80, 78, 100],
                    symbolSize: 10,
                    Symbol: 'circle',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'gray',
                            borderWidth: 2,
                            borderColor: 'yellow',
                            lineStyle: { width: 2 },
                            ShadowBlur: 5,
                            shadowColor: '#188df0'
                        }
                    }
                }
            ]
        })
    }
    zhexiantu()
    function zhuzhuangtu() {
        //创建并初始化一个echarts实例
        var count = document.querySelector('#zhuzhuangtu')
        var e = echarts.init(count)
        //绘制图表
        e.setOption({
            legend: { //图例
                bottom: 2,
                right: 60,
            },
            xAxis: {
                data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
            },
            yAxis: {
                // data:['$0','$1k','$2k','$3k']
            },
            series: [
                {
                    name: 'This year',
                    barWidth: 20,
                    color: 'blue',
                    type: 'bar',
                    data: ['1000', '2000', '3000', '2500', '2800', '2500', '3000']
                },
                {
                    name: 'Last year',
                    barWidth: 20,
                    color: 'rgb(195, 198, 200)',
                    type: 'bar',
                    data: ['700', '1700', '2600', '2000', '1700', '1500', '1900']
                },
            ]
        })
    }
    zhuzhuangtu()
    function render(data) {
        var str = data.map((item, index) => {
            return `<div class="hang">
                        <span class="touxiang"><img src="img/1.jpg"> </span>
                        <span class = "name">${item.name}</span>
                        <span class = "price">$${item.price} USD</span>
                        <span class="sales">↑ 12%${item.sales}sold</span>
                        <span class="iconfont icon-bianji"></span>
                    </div>`
        }).join('')
        document.querySelector('.date').innerHTML = str;
    }
    render(data.list)
</script>